<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">
    <select id="select">
        <option value="001">四川</option>
        <option value="002">云南</option>
        <option value="003">贵州</option>
    </select>
    <input type="checkbox" id="checkbox"><label for="">我已阅读并同意以上协议</label>

    <input type="radio" value="男" name="gender"><label for="">男</label>
    <input type="radio" value="女" name="gender"><label for="">女</label>


    <form action="#" id="form">
        <input type="text">
        <button>提交按钮</button>
        <button type="reset">重置按钮</button>
        <input type="submit">
        <input type="reset">
    </form>

    <script>
        const inputEle = document.querySelector('#input');
        const selectEle = document.querySelector('#select');
        const checkboxEle = document.querySelector('#checkbox');
        const radioEles = document.querySelectorAll("[name=gender]");
        const formEle = document.querySelector('#form');

        formEle.onsubmit = function () {
            console.log("表单被提交了！");
        }
        formEle.onreset = function () {
            console.log("表单被重置了！");
        }


        radioEles.forEach(itemEle => {
            itemEle.onchange = function () {
                if (itemEle.checked) {
                    console.log(itemEle.value);
                }
                console.log("单选按钮的选择改变了", itemEle, itemEle.checked);
            }
        })




        checkboxEle.onchange = function () {
            console.log("复选框的选择发生改变", checkboxEle.checked);
        }

        selectEle.onchange = function () {
            console.log("下拉列表的选择发生改变", selectEle.value);
        }

        inputEle.onchange = function () {
            console.log("onchange 内容发生变化并且失去焦点");
        }
        inputEle.oninput = function () {
            console.log("oninput 内容发生变化");
        }


        inputEle.onfocus = function () {
            // console.log("获取输入框的焦点");
        }
        inputEle.onblur = function () {
            // console.log("输入框失去焦点", inputEle.value);
        }
    </script>
</body>

</html>